<template>
	<view>
		<view class="order">
			<h2>购买人所有订单</h2>
		</view>
		<table>
			<tr>
				<th>订单号</th>
				<th>总价格</th>
				<th>购买人</th>
				<th>操作</th>
			</tr>
			<tr v-for="(item,index) in orders" :key='index'>
				<td>{{item.order_num}}</td>
				<td>{{item.food_totalprice}}</td>
				<td>{{item.username}}</td>
				<td style="display: flex;">
					<u-button type="primary" style="width:6rem;background-color: green;"
						@click="orderinfo(item.id)">查看详情</u-button>
					<u-button type="primary" style="width: 6rem;">查看评价</u-button>
				</td>
			</tr>
		</table>
		<h2>订单详情</h2>
		<view class="orderlist">
			<div class="card" v-for="item in orderlist" :key="item.id">
				<div class="cardLeft">
					<img :src="picture" alt="" style="width:200rpx;height: 200rpx; margin-left: 1rem;" />
					<div>
						<p class="cardPone">
							<span class="brand">品牌</span>
							<span class="dex">{{item.foodname}}</span>
						</p>
					</div>
				</div>
				<div>
					<p class="point">数量{{item.count}}</p>
				</div>
			</div>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orders: [],
				orderlist: [],
				avatarList: [{
					url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png'
				}, {
					url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png'
				}, {
					url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png'
				}],
				picture: 'https://img2.baidu.com/it/u=50304537,1020379833&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1716656400&t=60dce4ef161b7484c5a6c7d6adef428b'
			};
		}, 
		onLoad() {
			uni.request({
				url: `http://192.168.137.23:8002/admin/userorders?username=1123`,
				method: 'GET',
				success(res) {
					console.log(res);
					this.orders = res.data
				},
				fail(err) {
					console.log(err);
				}
			})
		}, 
		methods: {
			orderinfo(id) {
				uni.request({
					url: `http://192.168.137.23:8002/admin/orderinfos?orders_id=${id}`,
					method: 'GET',
					success(res) {
						this.orderlist = res.data
					}, 
					fail(err) {
						console.log(err);
					}
				})
			},

		}
	}
</script>

<style lang="scss">
	table {
		width: 100%;
		border-collapse: collapse;

		tr {
			border: 1px solid black;

			th {
				border: 1px solid black;
			}

			td {
				border: 1px solid black;
				vertical-align: middle;
				text-align: center;
			}
		}
	}

	.card {
		height: 9.375rem;
		border-bottom: 1px solid #ccc;
		display: flex;
		justify-content: space-between;
		align-items: center;

		/* 垂直居中 */
		.cardLeft {
			display: flex;
			justify-content: space-around;

			.cardPone {
				margin: 1rem;

				.brand {
					background-color: orange;
					color: #fff;
					margin-right: 1rem;

				}

				.dex {
					font-size: 1rem;
				}
			}

			.cardPtwo {
				display: flex;
				margin: 1rem;
			}

			.cardPthree {
				margin: 1rem;
				font-size: 0.7rem;

			}
		}

		.cardRigthone {
			color: #ccc;
			margin: 1rem;
		}
	}

	.chat-custom-right {
		flex: 1;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-end;
	}

	.chat-custom-text {
		font-size: 12px;
		color: #999;
	}
</style>